<template>
  <div class="page-employdetails">
    <div class="e-content">
      <div class="s-info">
        <div class="s-avator">
          <img v-bind:src="avatar" />
        </div>
        <div class="s-name">{{name}}</div>
        <div class="s-tel">{{phone}}</div>
      </div>


      <div v-show="cList.length!==0" class="u-list">
        <div id="wrapper">
          <div id="scroller">
            <div v-for="(item,index) in cList" v-bind:key = "index" class="u-item">
              <div class="s-name">{{item.plug.site.name}}</div>
              <div class="s-time">{{item.beginTime}}</div>
              <div class="u-right">
                    <div class="s-time">{{item.actualTimespan}}</div>
                    <div class="s-money">{{(item.amount/100).toFixed(2)}}元</div>
              </div>
            </div>

            <div v-if="loadMoreFlag" class="scroll-loader">上拉加载更多...</div>
          </div>
        </div>
      </div>
      <div v-show="cList.length==0" class="u-list u-list-null">
          <div class="u-list-ntxt">暂无充电记录</div>
      </div>
    </div>
    <div class="page-bottom">
      <div @click="DelEmploy" class="e-btn">删除员工</div>
    </div>


  </div>
</template>

<style lang="less" scoped>
.page-employdetails {
  width: 100%;
  height: 100%;
  position: relative;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  box-sizing: border-box;
  padding: 0 0 100px 0;
  .e-content {
    -webkit-box-flex: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    box-sizing: border-box;

    .s-info {
      position: relative;
      font-size: 24px;
      color: #717171;
      max-height: 150px;
      height: 150px;
      line-height: 30px;
      border-bottom: 1px solid #ececec;
      box-sizing: border-box;
      padding: 30px 30px 20px 150px;
      display: -webkit-box;
      -webkit-box-pack: center;
      -webkit-box-orient: vertical;
      color:#333;
     .s-name {
        font-size: 30px;
        color: #000;
        margin-bottom: 10px;
      }
      .s-avator{
        position: absolute;
        left: 30px;
        top: 30px;
        width: 100px;
        height: 100px;
        img{
          display: block;
          max-width: 100%;
          width: 100%;
        }
      }
    }
    .u-list {
      box-sizing: border-box;
      position: relative;
      -webkit-box-flex: 1;

      .u-item {
        position: relative;
        height: 130px;
        box-sizing: border-box;
        padding: 20px 150px 20px 0;
        margin: 0 30px;
        border-bottom: 1px solid #ececec;
        .s-name {
          font-size: 30px;
          height: 50px;
          line-height: 50px;
        }
        .u-right {
          position: absolute;
          right: 0;
          top: 25px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          & > div {
            -webkit-box-flex: 1;
            height: 40px;
            line-height: 40px;
            text-align: right;
            &.s-money {
              color: #2992ed;
            }
          }
        }
      }

      &.u-list-null {
        padding: 50px 0 0 0;
        text-align: center;
        color: #717171;
        font-size: 28px;
      }
    }
  }
}

.item-content {
  box-sizing: border-box;
  .item-inner {
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    border-bottom: 1px solid #ececec;
    &.last {
      border: none;
    }
    &.item-inner-arrow {
      background: url("../public/imgs/icon-arrow-right.png") right center
        no-repeat;
      background-size: 45px 45px;
    }
    & > label {
      display: block;
      width: 150px;
      box-sizing: border-box;
      margin: 0 10px 0 0;
      text-align: right;
    }
    .item-input {
      height: 100px;
      -webkit-box-flex: 1;
      box-sizing: border-box;
      text-align: left;
      line-height: 80px;
      padding: 10px;
    }
  }

  &.item-content-code {
    .item-input {
      display: -webkit-box;
      -webkit-box-align: center;
      input {
        -webkit-box-flex: 1;
      }
      & > div {
        width: 150px;
        height: 65px;
        line-height: 65px;
        text-align: center;
        background: #3096fd;
        color: #fff;
        &.item-countdown-none {
          background: #ccc;
        }
      }
    }
  }
}

.page-bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  border-top: 1px solid #ececec;
  height: 100px;
  box-sizing: border-box;
  width: 100%;
  padding: 20px 30px;
  background: #fcfbfb;
  .e-btn {
    text-align: center;
    color: #2992ed;
    font-size: 28px;
    width: 100%;
    height: 100%;
    line-height: 60px;
    border-radius: 5px;
  }
}
</style>

<script>
var AlloyTouch = require("alloytouch");
var Transform = require("css3transform");
var scrollHei = null;
export default {
  name: "EmployDetails",
  data() {
    return {
      name: "",
      phone: "",
      avatar: require("../public/imgs/avator.jpg"),
      id: "",
      pageIndex: 1,
      pageSize: 20,
      loadMoreFlag: false,
      cList: []
    };
  },
  created() {
    var query = this.$route.query;
    if (query.id) {
      this.id = query.id;
    } else {
      this.Toast("地址栏参数错误");
    }
  },
  mounted() {
    var self = this,
      scroller = document.querySelector("#scroller"),
      scrollHei = document.querySelector("#scroller").clientHeight,
      hei =
        scrollHei > window.innerHeight
          ? window.innerHeight - scrollHei - 220
          : 0;

    console.log(scrollHei);
    console.log(hei);

    Transform(scroller, true);

    var AT = new AlloyTouch({
      touch: "#wrapper", //反馈触摸的dom
      vertical: true, //不必需，默认是true代表监听竖直方向touch
      target: document.querySelector("#scroller"), //运动的对象
      property: "translateY", //被运动的属性
      initialValue: 0,
      bindSelf: true,
      min: 0,
      max: 0,
      change: function(value) {
        //console.log(document.documentElement.clientHeight);
      },
      touchMove: function(evt, value) {
        var diff = this.min - value;
        if (diff > 50) {
          $(".scroll-loader").html("正在更新数据...");
        } else {
          $(".scroll-loader").html("上拉加载更多...");
        }
      },
      touchEnd: function(evt, value) {
        var diff = this.min - value;
        if (diff > 50) {
          console.log("距离底部还有100像素的时候就加载");
          if (self.loadMoreFlag) {
            self.loadMore(function() {
              self.$nextTick(function() {
                var scrollHei = document.querySelector("#scroller")
                  .clientHeight;
                var hei =
                  scrollHei > window.innerHeight
                    ? window.innerHeight - scrollHei - 70
                    : 0;
                AT.min = hei;
              });
            });
          }
        }
      }
    });

    // 加载更多
    self.loadMore(function() {
      self.$nextTick(function() {
        var scrollHei = document.querySelector("#scroller").clientHeight;
        console.log(scrollHei);
        var hei =
          scrollHei > window.innerHeight
            ? window.innerHeight - scrollHei - 220
            : 0;
        AT.min = hei;
      });
    });
  },
  methods: {
    loadMore(callback) {
      var self = this;
      // 定义请求
      var req = this.Axios.get(this.Interface.host, {
        params: self.GetQuerys({
          id: self.id,
          pageIndex: self.pageIndex,
          pageSize: self.pageSize
        })
      });

      // 处理请求
      // 请求数据
      req.then(res => {
        var data = res.data.data.user;
        if (data != null) {
          self.name = data.name;
          self.phone = data.phone;
          // self.avatar = data.avatar;

          var count = data.consumingRecords.count;
          var record = data.consumingRecords.rows;
          self.pageTotal = count;

          self.loadMoreFlag =
            count >= this.pageIndex * this.pageSize ? true : false;

          self.pageIndex = self.pageIndex + 1;

          var r = self.cList;
          record.forEach((item, index) => {
            r.push(item);
          });

          self.cList = r;

          if (callback) callback();
        }
      });
    },
    GetQuerys({ id, pageIndex, pageSize }) {
      return {
        query: `{
                  user(id:${id}) {
                    name
                    phone
                    avatar
                    consumingRecords(pageIndex:${pageIndex},pageSize:${pageSize}) {
                      rows {
                          beginTime
                          amount
                          actualTimespan
                          plug {
                            site {
                              name
                            }
                          }
                        }
                      count
                    }
                  }
                }`
      };
    },
    DelEmploy() {
      var self = this;

      // 定义请求
      var req = this.Axios.post(this.Interface.DelEmploy, {
        userId: self.id
      });

      // 执行请求
      req.then(res => {
        var data = res.data;
        if (data.ok) {
          this.Toast("删除成功");
          setTimeout(function() {
            self.$router.back();
          }, 500);
        } else {
          this.Toast(data.msg);
        }
      });
    }
  }
};
</script>
